const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const WebpackDevServer = require('webpack-dev-server')
// 抽离css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩 css插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// js压缩插件TerserPlugin
const TerserPlugin = require('terser-webpack-plugin')
const { optimize } = require('webpack')
const toml = require('toml')
const yaml = require('yamljs')
const json5 = require('json5')
const { chunk } = require('lodash')
const ASSET_PATH = process.env.ASSET_PATH || '/'
// import webpack from 'webpack'

module.exports = (env) =>{
    return {
        // entry: './src/index.js',
        // 代码分离  || 内置 的SplitChunksPlugin实现防止重复（抽取复用）
        entry: {
            index: './src/index.js',
            another: './src/another-module.js'
        },
        // 代码分离-防止重复（抽取复用）
        // entry: {
        //     index: {
        //         import: './src/index.js',
        //         dependOn: 'shared'
        //     },
        //     another: {
        //         import: './src/another-module.js',
        //         dependOn: 'shared'
        //     },
        //     shared: 'lodash'
        // },
        output: {
            clean: true,
            filename: 'scripts/[name].[contenthash].js',
            path: path.resolve(__dirname,'./dist'),
            assetModuleFilename: 'images/[contenthash][ext][query]',
            // publicPath: 'http://localhost:8080:/'
        },
        // 根据命令行参数 env 来设置不同环境 mode
        mode: env.production ? 'production' : 'development',
        // 在开发模式下追踪代码（报错提示代码所在位置）
        devtool: 'inline-source-map',
        plugins: [
            // 这可以帮助我们在代码中安全地使用环境变量
            // new webpack.DefinePlugin({
            //     'process.env.ASSSET_PATH': JSON.stringify(ASSET_PATH)
            // }),
            new MiniCssExtractPlugin({
                filename: 'style/[contenthash].css'
            }),
            new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: './app.html',
                inject: 'body'
            }),
            
        ],
        module: {
            rules: [
                {
                    test:/\.png$/,
                    type:'asset/resource',
                    generator: {
                        filename: 'images/[contenthash][ext][query]'
                    }
                },{
                    test:/\.svg$/,
                    type:'asset/inline'
                },{
                    test:/\.txt$/,
                    type: 'asset/source'
                },{
                    test:/\.jpg$/,
                    type: 'asset',
                    parser: {
                        dataUrlCondition: {
                            maxSize: 4 *1024 * 1024
                        }
                    }
                },
                {
                    test: /\.(css|less)$/,
                    use: [MiniCssExtractPlugin.loader,'css-loader','less-loader']
                },
                {
                    test:/\.(csv|tsv)$/,
                    use: ['csv-loader']
                },
                {
                    test:/\.xml$/,
                    use: ['xml-loader']
                },
                {
                    test:/\.toml$/,
                    type:'json',
                    parser: {
                        parse:toml.parse
                    }
                },
                {
                    test:/\.yaml$/,
                    type:'json',
                    parser: {
                        parse:yaml.parse
                    }
                },
                {
                    test:/\.json5$/,
                    type:'json',
                    parser: {
                        parse:json5.parse
                    }
                },{
                    test:/\.js$/,
                    exclude:/node_modules/,
                    use:{
                        loader:'babel-loader',
                        options: {
                            presets:['@babel/preset-env'],
                            plugins:[
                                [
                                    '@babel/plugin-transform-runtime'
                                ]
                            ]
                        }
                    }
                }
            ]
        },
        devServer: {
            static: './dist'
        },
        optimization: {
            minimizer: [
                new CssMinimizerPlugin(),
                new TerserPlugin()
            ],
            splitChunks: {
                // 缓存第三方庫
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'all'
                    }
                }
            }
        },
        performance: {
            hints: false
        }
    }
}
